<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>Tutorial: 基础版分割模块 - Documentation</title>
    
    
    
        <meta name="keywords" content="webpack ES6 " />
        <meta name="keyword" content="webpack ES6 " />
    
    
    
    <meta property="og:title" content="test2"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content=""/>
    
    <meta property="og:url" content=""/>
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav class="wrap">
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    <h2><a href="index.html">Home</a></h2><h2><a href="https://gitee.com/shanliangdeYWJ" target="_blank" class="menu-item" id="website_link" >码云shanliangdeYWJ</a></h2><h3>Tutorials</h3><ul><li><a href="tutorial-Overview.html">Overview</a></li></ul><h3>Namespaces</h3><ul><li><a href="initCompute.html">initCompute</a><ul class='methods'><li data-type='method' style='display: none;'><a href="initCompute.html#.div">div</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.minus">minus</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.mul">mul</a></li><li data-type='method' style='display: none;'><a href="initCompute.html#.plus">plus</a></li></ul></li><li><a href="initTools.html">initTools</a><ul class='methods'><li data-type='method' style='display: none;'><a href="initTools.html#.digitalize">digitalize</a></li><li data-type='method' style='display: none;'><a href="initTools.html#.getTarget">getTarget</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#bindEvent">bindEvent</a></li><li><a href="global.html#init">init</a></li><li><a href="global.html#oBtnClick">oBtnClick</a></li><li><a href="global.html#oBtnGroup">oBtnGroup</a></li><li><a href="global.html#oCalculator">oCalculator</a></li><li><a href="global.html#oInputs">oInputs</a></li><li><a href="global.html#oResult">oResult</a></li><li><a href="global.html#renderResult">renderResult</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">Tutorial: 基础版分割模块</h1>
    

    <section>

<header>
    

    <h2>基础版分割模块</h2>
</header>

<article>
    <p><a href="tutorial-Overview.html">Overview</a></p>
<h1 id="%E5%9F%BA%E7%A1%80%E7%89%88%E5%88%86%E5%89%B2%E6%A8%A1%E5%9D%97">基础版分割模块</h1>
<p>我们当前的代码都写在全局范围内，容易造成重名, 最好用一个 独立作用域囊括起来，函数内部就是一个独立作用域</p>
<h2 id="%E7%8B%AC%E7%AB%8B%E4%BD%9C%E7%94%A8%E5%9F%9F">独立作用域</h2>
<ol>
<li>函数内部满足独立作用域条件</li>
</ol>
<pre class="prettyprint source lang-js"><code>function test() {
    // 独立作用域
}
test();
</code></pre>
<blockquote>
<p>注意：函数执行完毕没有被销毁，只是回到了被定义的状态，这是预编译特性，这是函数定义时候要考虑的问题，在一个普通的函数被执行完毕以后，函数会返回一个定义的状态</p>
</blockquote>
<ol start="2">
<li>缺点</li>
</ol>
<p><em>必须如下方式调用</em></p>
<pre class="prettyprint source lang-js"><code>test();
</code></pre>
<h2 id="%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%E4%BB%80%E4%B9%88%EF%BC%9F">我们需要什么？</h2>
<blockquote>
<p>但是我们需要的是函数内部的程序正常执行，等内部执行完毕这个函数被销毁。就是需要这个函数马上执行掉</p>
</blockquote>
<h2 id="%E5%A6%82%E4%BD%95%E8%AE%A9%E5%87%BD%E6%95%B0%E7%AB%8B%E5%88%BB%E6%89%A7%E8%A1%8C%E6%8E%89">如何让函数立刻执行掉</h2>
<p><em>那就需要加上执行符号</em>，只有表达式才能加上执行符号，要让他变成表达式</p>
<pre class="prettyprint source lang-js"><code>// 这个是声明式，后面不可以跟执行符号 ()
function test() {
    // 函数内部满足独立作用域条件
}
</code></pre>
<blockquote>
<ol>
<li>我希望执行完毕以后销毁</li>
<li>但是函数没办法在后面加上 执行符号 ()， 会报错</li>
<li>执行符号必须跟在表达式后面</li>
</ol>
</blockquote>
<p>例子： 声明一个匿名函数，将该函数赋值给一个 变量，后面可以加上 () 立即执行掉</p>
<pre class="prettyprint source lang-js"><code>var a = function () {
    // 函数内部满足独立作用域条件
}();
// 因为匿名函数立即执行掉了，所以 var a = 没有什么意义，调用的时候用不到这个 a，我们去掉 var a = ，但是会报错。
</code></pre>
<p>什么样子的东西能够变成一个表达式？如何不用赋值的一个方式立即执行一个表达式呢</p>
<pre class="prettyprint source lang-js"><code>a = 1;
!a;
+a;
-a;
a++;
(a)
</code></pre>
<h3 id="%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F">函数表达式</h3>
<pre class="prettyprint source lang-js"><code>!function () {
    // 独立作用域
    console.log(1)
}();

+function () {
    // 独立作用域
    console.log(1)
}();

-function () {
    // 独立作用域
    console.log(1)
}();

(function () {
    // 1. 创建独立作用域
    // 2. 执行完毕销毁
    console.log(1)
})();
</code></pre>
<blockquote>
<p>ECMAScript 中，上述表达式，称为立即执行函数，又称自执行函数</p>
</blockquote>
<h4 id="%E7%89%B9%E7%82%B9">特点</h4>
<ol>
<li>创建独立作用域</li>
<li>执行完毕销毁</li>
</ol>
<pre class="prettyprint source lang-js"><code>// 普遍开发中不加分号，因此只在自执行函数的 开头 和 结尾 加上一个分号
;(function () {
    // 1. 创建独立作用域
    // 2. 执行完毕销毁
    console.log(1)
})();
</code></pre>
<p>ES5 模块，同样是 ES5 大多数开发中的模块，<br>
模块：功能的集合，封装在一个作用域内部的功能的集合，这些功能可以通过模块的一些特性，导出导入，可以依赖别人也可以被别人依赖</p>
<h2 id="%E4%BB%A3%E7%A0%81">代码</h2>
<p>index.html</p>
<pre class="prettyprint source lang-html"><code>&lt;!DOCTYPE html>
&lt;html lang=&quot;en&quot;>

&lt;head>
    &lt;meta charset=&quot;UTF-8&quot;>
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
    &lt;title>计算器&lt;/title>
&lt;/head>

&lt;body>
    &lt;div class=&quot;calculator J_calculator&quot;>
        &lt;p>结果：&lt;span class=&quot;result&quot;>&lt;/span>&lt;/p>
        &lt;div class=&quot;input-group&quot;>
            &lt;!-- 设置3 4 便于调试 -->
            &lt;input type=&quot;text&quot; value=&quot;3&quot;>
            &lt;input type=&quot;text&quot; value=&quot;4&quot;>
        &lt;/div>
        &lt;div class=&quot;btn-group&quot;>
            &lt;button data-method=&quot;plus&quot;>+&lt;/button>
            &lt;button data-method=&quot;minus&quot;>-&lt;/button>
            &lt;button data-method=&quot;mul&quot;>*&lt;/button>
            &lt;button data-method=&quot;div&quot;>/&lt;/button>
        &lt;/div>
    &lt;/div>
    &lt;script src=&quot;./js/tools.js&quot; type=&quot;text/javascript&quot;>&lt;/script>
    &lt;script src=&quot;./js/index.js&quot; type=&quot;text/javascript&quot;>&lt;/script>
&lt;/body>

&lt;/html>
</code></pre>
<p>js/index.js</p>
<pre class="prettyprint source lang-js"><code>/**
 * @author 善良的YWJ
 * @Created by shanliangdeYWJ on 2020/11/29 12:22:58
 * @file index.js
 * @description
 * ```
 * 主文件
 * ```
 * @link [Github](https://github.com/shanliangdeYWJ)
 */

; (function (doc, initTools, initCompute) { // 立即执行函数传入形参
    /** 
     * @global
     * @type {HTMLCollectionOf&lt;Element>} 计算器 dom 元素
     */
    var oCalculator = doc.getElementsByClassName('J_calculator')[0],
        /** 
         * @global
         * @type {HTMLCollectionOf&lt;Element>} 计算器输出结果标签 dom 元素
         */
        oResult = oCalculator.getElementsByClassName('result')[0],
        /** 
         * @global
         * @type {HTMLInputElement} 计算器第一个输入值标签 dom 元素
         */
        oInputs = oCalculator.getElementsByTagName('input'),
        /** 
         * @global
         * @type {HTMLCollectionOf&lt;Element>} 计算器按钮组标签 dom 元素 
         */
        oBtnGroup = oCalculator.getElementsByClassName('btn-group')[0];

    console.log(oCalculator,
        oResult,
        oInputs,
        oBtnGroup);

    /**
     * 管理模块执行
     * @global
     * @description 
     * ```
     * init();
     * ```
     */
    var init = function () {
        bindEvent();
    };

    /**
     * 包裹绑定事件处理函数，防止暴露在独立作用于最外面
     * @global
     * @description
     * ```js
     * bindEvent();
     * ```
     */
    function bindEvent() {
        oBtnGroup.addEventListener('click', oBtnClick, false);
    }

    /**
     * 点击事件
     * @global
     * @param {Event} ev 事件对象
     */
    function oBtnClick(ev) {
        var tar = initTools.getTarget(ev),
            tagName = tar.tagName.toLowerCase();

        if (tagName === 'button') {
            var method = tar.getAttribute('data-method'),
                fVal = initTools.digitalize(oInputs[0].value),
                sVal = initTools.digitalize(oInputs[1].value);

            renderResult(initCompute[method](fVal, sVal));
        }
    }

    /**
     * 渲染结果函数
     * @global
     * @param {string|number} result 需要渲染的内容
     */
    function renderResult(result) {
        oResult.innerText = result;
    }

    init();
})(document, initTools, initCompute); // 立即执行函数的实参
</code></pre>
<p>js/tools.js</p>
<pre class="prettyprint source lang-js"><code>/**
 * @author 善良的YWJ
 * @Created by shanliangdeYWJ on 2020/11/29 17:38:38
 * @file initTools.js
 * @description
 * ```js
 * 工具函数
 * ``` 
 * see <a href="initTools.html">initTools</a>
 * ```js
 * initTools.digitalize(str) 
 * initTools.getTarget(ev) 
 * ```
 * see <a href="initCompute.html">initCompute</a>
 * ```js
 * initCompute.plus(2, 3)
 * initCompute.minus(2, 3)
 * initCompute.mul(2, 3)
 * initCompute.div(2, 3)
 * ```
 * @link [Github](https://github.com/shanliangdeYWJ)
 */

/**
 * 工具类
 * @namespace
 * @description
 * ```js
 * initTools.digitalize(str) 
 * initTools.getTarget(ev) 
 * ```
 */
var initTools = (function () {

    /**
     * 文字去除空格转化成数字
     * @method digitalize
     * @param {string} str 数字字符串 | 字符串
     * @return {number|0} 数字 | 0
     * @memberof initTools
     */
    function digitalize(str) {
        str = str || ''
        return Number(str.replace(/\s+/g, '')) || 0;
    }

    /**
     * 返回事件对象
     * @method getTarget
     * @param {event} ev 事件
     * @return {EventTarget} 事件对象
     * @memberof initTools
     */
    function getTarget(ev) {
        var e = ev || window.event;
        return e.target || e.srcElement;
    }

    return {
        digitalize: digitalize,
        getTarget: getTarget
    };
})();
/**
 * 工具类
 * @namespace
 * @description
 * ```js
 * initCompute.plus(2, 3)
 * initCompute.minus(2, 3)
 * initCompute.mul(2, 3)
 * initCompute.div(2, 3)
 * ```
 */
var initCompute = (function () {

    /**
     * 加法运算 加数 + 加数 = 和
     * @method plus
     * @param {number} a 加数
     * @param {number} b 加数
     * @return {number} 和
     * @memberof initCompute
     */
    function plus(a, b) { return a + b; };

    /**
     * 减法运算 被减数 - 被减数 = 差
     * @method minus
     * @param {number} a 被减数
     * @param {number} b 减数
     * @return {number} 差
     * @memberof initCompute
     */
    function minus(a, b) { return a - b; };

    /**
     * 乘法运算  因数 × 因数 = 积
     * @method mul
     * @param {number} a 因数
     * @param {number} b 因数
     * @return {number} 积
     * @memberof initCompute
     */
    function mul(a, b) { return a * b; };

    /**
     * 除法运算 被除数 ÷ 除数 = 商
     * @method div
     * @param {number} a 被除数
     * @param {number} b 除数
     * @return {number} 商
     * @memberof initCompute
     */
    function div(a, b) { return a / b; };

    return {
        plus: plus,
        minus: minus,
        mul: mul,
        div: div
    };
})();

</code></pre>
</article>

</section>

    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Tue Dec 01 2020 08:42:14 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>


<script src="scripts/collapse.js" defer></script>


    <link type="text/css" rel="stylesheet" href="./shanliangdeYWJ.css">
    
</body>
</html>